<template>
    <div class="infinite-container">
      <div class="bg-t1">
        <select-role2 @familychang="familychangHandle" ref="role2">
            </select-role2>
      </div>
        <common-list title="账户余额" :desc="leftMoney|fixedMoney">
        </common-list>
        <div class="t5 pd10 text-right" v-show="leftMoney<appointTime.regFee">账户余额不足，请及时
          <router-link to="/inpatient-care/prePayHand">充值</router-link>
          ，以免影响就诊</div>
        <common-list margin="10">
          <div slot="left">
            <div class="confirm-hospital">挂号费</div>
          </div>
          <div class="confirm-money">
            {{appointTime.regFee | fixedMoney}}
          </div>
        </common-list>

        <common-list title="预约科室" :desc="dept.departmentName" margin="10"></common-list>
        <common-list title="预约医生" :desc="doctor.doctorName" v-show="!!doctor.doctorName"></common-list>
        <common-list title="预约日期" :desc="selectedSchedule.scheduleDate" ></common-list>
        <common-list title="就诊预估时间" :desc="appointTime.beginTime + '-'+ appointTime.endTime"></common-list>
        <common-list title="就诊地点"  :desc="doctor.visitAddress ||selectedSchedule.visitAddress"></common-list>



      <mu-flexbox style="margin-top:4em;">
        <mu-flexbox-item grow="2"></mu-flexbox-item>
        <mu-flexbox-item grow="16">
         <mu-raised-button class="submit-btn" label="提交预约" @click="confirmClick" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="2"></mu-flexbox-item>
      </mu-flexbox>

        <mu-dialog :open="dialog">
          <div v-html="dialogContent"></div>
          <div class="login center">
          <mu-flat-button class="btn-login mt20" slot="actions" @click="handleDialogClick" primary label="确定" fullWidth/>
          </div>
        </mu-dialog>
    </div>
</template>

<script>
import CommonList from '@/components/CommonList'
import {commonAjax, CONFIRM_PAY_TIPS, RESTFUL_API} from '@/api/api'
import SelectRole2 from '@/components/SelectRole2'

export default {
  mounted () {
    if (!this.selectedSchedule.scheduleDate) {
      this.selectedSchedule = {
        scheduleDate: sessionStorage.currentDay
      }
    }
    if (this.$route.query.selectperson === '1') {
      this.$refs.role2.show()
    }
  },
  data () {
    return {
      payType: '',
      CONFIRM_PAY_TIPS: CONFIRM_PAY_TIPS,
      doctor: JSON.parse(sessionStorage.doctor || '{}'),
      appointTime: JSON.parse(sessionStorage.appointTime || '{}'),
      selectedSchedule: JSON.parse(sessionStorage.selectedSchedule || '{}'),
      dialog: false,
      dialogTitle: '',
      dialogContent: '',
      familyPerson: JSON.parse(sessionStorage.familyPerson || '{}'),
      person: JSON.parse(sessionStorage.person || '{}'),
      dept: JSON.parse(sessionStorage.dept || '{}'),
      leftMoney: 0,
      selectedPerson: '请选择就诊人',
      selectedNumber: '',
      successFlag: true
    }
  },
  methods: {
    familychangHandle (f) {
      this.familyPerson = f
      this.selectedPerson = f.realname
      this.selectedNumber = f.patientcodeNumber
      this.leftMoney = f.patientBusCardBalance
      // this.queryAccount()
    },
    getTime (val) {
      if (!val) {
        return ''
      }
      return val.slice(11, 16)
    },
    changeRole () {
      this.$refs.role2.show()
    },
    queryAccount () {
      let params = {
        patientCode: this.familyPerson.patientcode || '',
        uid: this.person.id || ''
      }
      commonAjax(`${RESTFUL_API.queryAccount}`, params, true).then(res => {
        if (res.data.code == 200) {
          this.leftMoney = res.data.data.accountBalance
        }
      })
    },
    confirmClick () {
      if (this.selectedPerson === '请选择就诊人') {
        this.$store.commit('UPDATE_TOAST', {
          message: '请选择就诊人'
        })
        return
      }
      let params = {
        departmentCode: this.dept.departmentCode,
        doctorCode: this.doctor.doctorCode,
        appointmentType: this.doctor.doctorType,
        scheduleDate: this.selectedSchedule.scheduleDate,
        timeFlag: this.selectedSchedule.timeFlag || this.appointTime.timeFlag,
        beginTime: this.appointTime.beginTime,
        endTime: this.appointTime.endTime,
        scheduleDetailId: this.appointTime.serialNumber,
        regFee: this.appointTime.regFee,
        patientCode: this.familyPerson.patientcode || '',
        patientType: '1',
        patientMedicalCardType: '1',
        patientMedicalCardNumber: '',
        patientName: this.familyPerson.realname,
        patientMobile: this.familyPerson.mobile,
        outOrderNumber: '',
        patientIdentityCardType: '1',
        patientIdentityCardNumber: this.familyPerson.idcard,
        outpatientTpye: 1
      }
      commonAjax('appointment/confirmAppointment', params, true).then(res => {
          this.dialogContent = res.data.message
        this.dialog = true
        if (res.data.code == 200 || res.data.code === '1') {
          this.successFlag = true
          sessionStorage.order = JSON.stringify(res.data.data)
        } else {
          this.successFlag = false
        }
      }).catch(res => {
          console.warn(res)
      })
      // this.$router.push('/appointment/appoint-pay')
    },
    handleDialogClick () {
      this.dialog = false
      if (this.successFlag) {
        this.$router.push({
          path: '/appointment/appoint-pay-success'
        })
      }
    },
    open () {
      this.dialog = true
    },
    close () {
      this.dialog = false
    }
  },
  beforeDestroy () {
    sessionStorage.removeItem('selectedSchedule')
  },
  components: {
    CommonList, SelectRole2
  }
}
</script>
<style lang="less">
@import '../../common/css/vars.less';
.bg-t1{
  background: #00B366;
}
.tips{
  .tips-title {
    color:@color-primary;
    padding: 20px 0 10px;
    .bg_tips {
      display: inline-block;
      width: 27px;
      height: 16px;
      background-position: 0 -636px;
      background-size: 187px;
    }
  }
  li {
    font-size: 12px;
    line-height: 1.6em;
  }
}
</style>

